<template>
  <div class="app-container" style="margin-bottom: 25px;background-color: rgb(255,255,255)">
    <div class="header_top">
      <div class="topcont">
        <div class="topleft">
            <span class="pic">
                <img style="width: 100%" src="../../../assets/img/resources/pic_notice.png" alt="通知公告">
            </span>
        </div>
        <form >
          <div class="searchbg">
            <input type="text" id="keyWord" v-model="queryParams.title" placeholder="请输入关键字">
            <button type="submit" @click="handleQuery" class="btn_search"></button>
          </div>
        </form>
      </div>
    </div>
    <div class="pagecontent">
      <div class="cont_left">
        <ul class="ul_list01">
          <li v-for="(item,index) in hotAntiFraudList" :key="index">
            <div class="linr">
              <a href="#" @click="toInfo(item.id,'antiFraud')" :title="item.title">
                {{item.title}}
              </a><em></em>
            </div>
            <span>[{{parseTime(item.createTime,'{y}-{m}-{d}') }}]</span>
          </li>

        </ul>
        <ul class="ul_list02">
          <template >
            <div v-for="(item,index) in antiFraudList" :key="index">
              <li >
                <div class="linr">
                  <a href="#" @click="toInfo(item.id,'antiFraud')" :title="item.title">
                    {{item.title}}
                  </a>
                </div>
                <span>[{{parseTime(item.createTime,'{y}-{m}-{d}') }}]</span>
              </li>
              <li v-if="index%5===4" class="line"></li>
            </div>

          </template>
        </ul>
        <div class="page">
          <pagination
            v-show="total>0"
            :total="total"
            :page-sizes="[20, 40, 60,100]"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {listAntiFraudArticles,listHotAntiFraudArticles} from "@/api/resources/antiFraudArticles.js";
export default {
  name: "List",
  data() {
    return {
      // 总条数
      total: 0,
      // 参数表格数据
      antiFraudList: [],
      hotAntiFraudList: [],
      // 查询参数
      queryHotParams: {
        pageNum: 1,
        pageSize: 2,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        title: undefined,
        isPopular:'0'
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询参数列表 */
    getList() {
      listAntiFraudArticles(this.addDateRange(this.queryParams)).then(response => {
          this.antiFraudList = response.rows;
          this.total = response.total;
        }
      );
      listHotAntiFraudArticles(this.addDateRange(this.queryHotParams)).then(response => {
          this.hotAntiFraudList = response.rows;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    toInfo(id,type){
      if(type === 'security'){
        this.$router.push({path:'/securityArticles/info',query:{id:id}})
      }else if(type === 'antiFraud') {
        this.$router.push({path:'/antiFraudArticles/info',query:{id:id}})
      }else {
        this.$router.push({path:'/securityArticles/info',query:{id:id}})
      }
    }
  },
}
</script>

<style scoped>
.header_top {
  width: 1519px;
  padding: 19px 0 5px;
  background: url(../../../assets/img/resources/top_bg.jpg) no-repeat top center;
  overflow: hidden;
}
.header_top .topcont, .pagecontent {
  width: 980px;
  margin: 0 auto;
}
.header_top .topleft {
  float: left;
  height: 34px;
}
.header_top .searchbg input {
  float: left;
  width: 194px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  padding: 0px 2px;
  border: none;
  outline: none;
  margin-left: 620px;
}
input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}
.header_top .searchbg .btn_search {
  float: right;
  display: block;
  width: 46px;
  height: 24px;
  background: url(../../../assets/img/resources/searchbg.jpg) no-repeat -199px -1px;
  border: none;
  outline: none;
  cursor: pointer;
}
form {
  display: block;
  margin-top: 0em;
}
.pagecontent {
  padding-bottom: 20px;
  overflow: hidden;
}
@media screen and (min-width: 980px)
.header_top .topcont, .pagecontent {
  width: 980px;
  margin: 0px auto;
}
.cont_left {
  border-top: #829ca8 1px solid;
}
@media screen and (min-width: 980px)
.cont_left {
  width: 670px;
}
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
.ul_list01 {
  width: 100%;
  padding: 10px 0px;
  margin: 10px 0px;
  border-bottom: #ccc 1px dotted;
}
ol, ul {
  list-style: none;
}
.ul_list01 li, .ul_list02 li {
  width: 100%;
  height: 32px;
  line-height: 32px;
}
.ul_list01 .linr {
  position: relative;
  height: 32px;
}
.ul_list01 .linr, .ul_list02 .linr {
  float: left;
  width: 74%;
  height: 32px;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  overflow: hidden;
}
.ul_list01 span, .ul_list02 span {
  float: right;
  font-size: 12px;
  color: #999;
  text-align: right;
}
.ul_list02 {
  width: 100%;
  padding: 10px 0px;
}
.ul_list01 li, .ul_list02 li {
  width: 100%;
  height: 32px;
  line-height: 32px;
}
.ul_list01 .linr, .ul_list02 .linr {
  float: left;
  width: 93%;
  height: 32px;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  overflow: hidden;
}
.page {
  padding-right: 0;
}
.page {
  padding: 10px;
  text-align: right;
  font-size: 12px;
  overflow: hidden;
}
.ul_list01 a {
  color: #920000;
  text-decoration: none;
}
.ul_list01 em {
  position: absolute;
  width: 4%;
  height: 16px;
  margin-left: 1px;
  background: url(../../../assets/img/resources/hot.jpg) no-repeat;
}
address, caption, cite, code, em, strong, th {
  font-style: normal;
  font-weight: normal;
}
.ul_list02 .line {
  width: 100%;
  height: 14px;
  border-bottom: #999 dotted 1px;
  margin-bottom: 15px;
}
a {
  color: #3b639f;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
</style>
